import React, { Component } from 'react'
// 旧版本的生命周期钩子 16.3 版本以前
// 初始化
// 运行时
// 销毁
export default class App extends Component {
  // 1. 初始化阶段 - 设置初始化状态 以及 定义事件
  constructor (props) {
    super(props)
    this.state = { count: 100 }
  }
  // 2. 初始化阶段 - 组件即将被装载 --- 没什么用
  componentWillMount () {}

  // 3.初始化阶段 - 初次渲染函数
  // 8.运行时阶段 - 更新视图
  render() {
    return (
      <div>
        { this.state.count }
      </div>
    )
  }
  // 4.初始化阶段 - 组件初次加载完毕 - mounted - 数据请求/实例化/定时器/计时器
  componentDidMount () {}

  // 5.运行时阶段 - 组件即将接收到新的数据 --- watch --- 子组件监听到父组件的数据变化 - 用的不多
  componentWillReceiveProps () {}

  // 6.运行时阶段 - 提升react 性能的关键，必须填写返回值，返回值为true，才能实现视图的二次渲染
  shouldComponentUpdate () {
    return true
  }

  // 7.运行时阶段 --- 组件即将更新 --- 没什么用
  componentWillUpdate () {}

  // 9.运行时阶段 --- 组件更新完毕 --- 特定条件下请求数据/实例化操作 - watch
  // componentWillReceiveProps 的功能可以在此处实现
  componentDidUpdate () {}

  // 10.销毁阶段
  componentWillUnmount () {}

  // 11.错误异常
  componentDidCatch () {}
}
